<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Three.js" data-ke-src="../Three.js"></script>
    <style>
        #canvas {
            width: 1000px;
            height: 1000px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="canvas"></div>
    <script>
        const width = document.getElementById("canvas").clientWidth
        const height = document.getElementById("canvas").clientHeight
        //渲染器
        var renderer
        function initRenderer() {
            renderer = new THREE.WebGLRenderer({
                antialias: true
            })
            renderer.setSize(width,height)
            renderer.setClearColor("#fff",1)
            document.getElementById("canvas").appendChild(renderer.domElement)
        }
        //场景
        var scene
        function initScene() {
            scene = new THREE.Scene()
        }
        //相机
        var camera
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45,width/height,1,10000)
            camera.position.x = 0
            camera.position.y = 0
            camera.position.z = 2000
            camera.up.x = 0
            camera.up.y = 1
            camera.up.z = 0
            camera.lookAt({
                x: 0,
                y: 0,
                z: 0
            })
        }
        //物体
        function drawWange() {
            var p1 = new THREE.Vector3(-500,0,0)
            var p2 = new THREE.Vector3(500,0,0)
            var color1 = new THREE.Color("black")
            var color2 = new THREE.Color("blue")
            var material = new THREE.LineBasicMaterial({vertexColors:true})
            var geometry = new THREE.Geometry()
            geometry.vertices.push(p1)
            geometry.vertices.push(p2)
            geometry.colors.push(color1)
            geometry.colors.push(color2)
            
            for(let i = 0;i < 20; ++i) {
                let line1 = new THREE.Line(geometry,material,THREE.LineSegments)
                line1.position.y = (i*50)-500
                scene.add(line1)
                
                let line2 = new THREE.Line(geometry,material,THREE.LineSegments)
                line2.position.x = (i*50)-500
                line2.rotation.z = Math.PI/2
                scene.add(line2)
            }
            
        }
        function renderStart() {
            initRenderer()
            initScene()
            initCamera()
            drawWange()
            renderer.clear()
            renderer.render(scene,camera)
        }
        renderStart()
    </script>    
</body>
</html>